<template>
	<el-dialog
		id="comDetailDialogDiv"
		:title="dialogTitle"
		:visible.sync="tabsDialogParams.dialogVisible"
		width="80%"
		@opened="onOpened()"
		:before-close="dialogClose"
		>
		<div style="width: 100%;height: 70vh;overflow-y: auto;">
			<el-tabs v-model="currTab" tab-position="left" @tab-click="changeTab">
			    <el-tab-pane name="1" label="基本信息">
					<div class="tabPanelDiv">
						<div class="detailLine">
							<div class="detailBlock">
								<div class="detailBlockText">
									<span class="detailBlockTextTitle">重点行业：</span><span class="detailBlockTextDesc">{{tabsDialogParams.objItem.instruct}}</span>
								</div>
							</div>
							<div class="detailBlock">
								<div class="detailBlockText">
									<span class="detailBlockTextTitle">绩效等级：</span><span class="detailBlockTextDesc">{{tabsDialogParams.objItem.grade}}</span>
								</div>
							</div>
							<div class="detailBlock">
								<div class="detailBlockText">
									<span class="detailBlockTextTitle" style="width: 6vw;">排污许可证：</span><span class="detailBlockTextDesc" style="width: 12vw;">{{tabsDialogParams.objItem.PWcode}}</span>
								</div>
							</div>
							<div class="detailBlock">
								<div class="detailBlockText">
									<span class="detailBlockTextTitle">联系人：</span><span class="detailBlockTextDesc">{{tabsDialogParams.objItem.lianxiren}}</span>
								</div>
							</div>
							<div class="detailBlock">
								<div class="detailBlockText">
									<span class="detailBlockTextTitle">联系方式：</span><span class="detailBlockTextDesc">{{tabsDialogParams.objItem.tel}}</span>
								</div>
							</div>
						</div>
						<div class="detailLine">
							<div class="detailBlock">
								<div class="detailBlockText">
									<span class="detailBlockTextTitle">  归属区：</span><span class="detailBlockTextDesc">{{tabsDialogParams.objItem.area}}</span>
								</div>
							</div>
							<div class="detailBlock">
								<div class="detailBlockText">
									<span class="detailBlockTextTitle">企业地址：</span><span class="detailBlockTextDesc" style="width: 30vw;">{{tabsDialogParams.objItem.address}}</span>
								</div>
							</div>
						</div>
						<div style="width: 100%;flex: 1;display: flex;">
							<div v-bind:class="[{ 'width85': hasless5video }, { 'width70': hasMore5video }]" style="height: 100%;padding: 10px;">
								<div id="detailMap" style="width: 100%;height: 100%;border-radius: 5px;"></div>
							</div>
							<div v-if="subCurrMarker" style="width: 15%;height: 100%;display: flex;flex-direction: column;">
								<div v-for="(item,index) in subCurrMarker.enterList.slice(0,5)" style="width: 100%;height: 20%;display: flex;flex-direction: column;text-align: center;">
									<div style="width: 100%;height: 1vw;color: #ffaa00;">
										{{item.enterName}}
									</div>
									<div style="width: 100%;height: 5vw;">
										<el-image :src="videoImage" style="height: 100%;"></el-image>
									</div>
								</div>
							</div>
							<div v-if="subCurrMarker" v-bind:class="[{ 'width0': hasless5video }, { 'width15': hasMore5video }]" style="height: 100%;display: flex;flex-direction: column;">
								<div v-for="(item,index) in subCurrMarker.enterList.slice(5,10)" style="width: 100%;height: 20%;display: flex;flex-direction: column;text-align: center;">
									<div style="width: 100%;height: 1vw;color: #ffaa00;">
										{{item.enterName}}
									</div>
									<div style="width: 100%;height: 5vw;">
										<el-image :src="videoImage" style="height: 100%;"></el-image>
									</div>
								</div>
							</div>
						</div>
					</div>
				</el-tab-pane>
			    <el-tab-pane name="2" label="车辆台账">
					<div class="tabPanelDiv">
						<el-table v-loading="loadingCLTZ" element-loading-text="数据加载中..." :data="dataTableListCLTZ" style="width: 100%;flex: 1;">
							<el-table-column label="序号" align="center" type="index" width="50px"></el-table-column>
							<el-table-column label="ID" align="center" prop="id" width="50px" v-if="false"></el-table-column>
							<el-table-column label="区域名称" align="center" prop="name"></el-table-column>
							<el-table-column label="所属单位" align="center" prop="company"></el-table-column>
							<el-table-column label="责任人" align="center" prop="principalName"></el-table-column>
							<el-table-column label="责任人电话" align="center" prop="principalPhone"></el-table-column>
							<el-table-column label="说明描述" align="center" prop="memo" width="500px"></el-table-column>
							
						</el-table>
						
						<el-pagination
							@size-change="handleSizeChangeCLTZ"
							@current-change="handleCurrentChangeCLTZ"
							:current-page="pageNumCLTZ"
							:page-sizes="[5, 10, 25, 50]"
							:page-size="pageSizeCLTZ"
							:background="true"
							layout="total, sizes, prev, pager, next, jumper"
							:total="totalCLTZ"
							style="height: 60px;padding-top: 20px;text-align: right;">
						</el-pagination>
					</div>
				</el-tab-pane>
			    <el-tab-pane name="3" label="进场记录">
					<div class="tabPanelDiv">
						<el-table v-loading="loadingJCJL" element-loading-text="数据加载中..." :data="dataTableListJCJL" style="width: 100%;flex: 1;">
							<el-table-column label="序号" align="center" type="index" width="50px"></el-table-column>
							<el-table-column label="ID" align="center" prop="id" width="50px" v-if="false"></el-table-column>
							<el-table-column label="进场记录" align="center" prop="name"></el-table-column>
							<el-table-column label="进场记录" align="center" prop="company"></el-table-column>
							<el-table-column label="进场记录" align="center" prop="principalName"></el-table-column>
							<el-table-column label="进场记录" align="center" prop="principalPhone"></el-table-column>
							<el-table-column label="说明描述" align="center" prop="memo" width="500px"></el-table-column>
						  
						</el-table>
						
						<el-pagination
							@size-change="handleSizeChangeJCJL"
							@current-change="handleCurrentChangeJCJL"
							:current-page="pageNumJCJL"
							:page-sizes="[5, 10, 25, 50]"
							:page-size="pageSizeJCJL"
							:background="true"
							layout="total, sizes, prev, pager, next, jumper"
							:total="totalJCJL"
							style="height: 60px;padding-top: 20px;text-align: right;">
						</el-pagination>
					</div>
				</el-tab-pane>
			    <el-tab-pane name="4" label="统计分析">
					<div class="tabPanelDiv">
						<div class="detailLine">
							<div class="detailBlock" style="padding-left: 1vw;">
								<div class="detailBlockText">
									<span class="detailBlockTextTitle">总上报记录：</span><span class="detailBlockTextDesc" style="width: 5vw;">{{totalReport}} 万条</span>
								</div>
							</div>
							<div class="detailBlock">
								<div class="detailBlockText">
									<span class="detailBlockTextTitle" style="width: 4vw;">总上报率：</span><span class="detailBlockTextDesc" style="width: 5vw;">{{totalReportPer}} %</span>
								</div>
							</div>
						</div>
						<div class="detailLine">
							<div class="detailBlock" style="padding-left: 1vw;">
								<div class="detailBlockText">
									<span class="detailBlockTextTitle"> 上报记录：</span><span class="detailBlockTextDesc" style="width: 5vw;">{{currReport}} 条</span>
								</div>
							</div>
							<div class="detailBlock">
								<div class="detailBlockText">
									<span class="detailBlockTextTitle" style="width: 4vw;"> 上报率：</span><span class="detailBlockTextDesc" style="width: 5vw;">{{currReportPer}} %</span>
								</div>
							</div>
							<div class="detailBlock">
								<div class="detailBlockText">
									<span class="detailBlockTextTitle" style="width: 9vw;">管控要求：新能源占比：</span><span class="detailBlockTextDesc" style="width: 3vw;">{{requirePer}} %</span><span class="detailBlockTextTitle" style="width: 5vw;">，实际占比：</span><span v-if="isOK" class="detailBlockTextDesc" style="width: auto;">{{realPer}} %</span><span v-else class="detailBlockTextDesc" style="width: auto;color: #ff011a;font-weight: bold;">{{realPer}} %</span>
								</div>
							</div>
							<div v-if="!isOK" class="detailBlock" style="width: 3vw;">
								<el-image :src="alertImage"></el-image>
							</div>
							
							<div class="detailBlock">
								<el-date-picker
									v-model="subCentusTime"
									type="datetimerange"
									align="right"
									start-placeholder="开始时间"
									end-placeholder="结束时间"
									style="margin-left: 3vw;"
									:default-time="['00:00:00', '23:59:59']">
								</el-date-picker>
								<el-button type="primary" style="margin-left: 1vw;" @click="setSubCentusData()">查询</el-button>
							</div>
						</div>
						<div style="width: 100%;height: 65vh;display: flex;flex-direction: column;">
							<div style="width: 100%;height: 50%;">
								<div id="dateRangeBarDiv" style="width: 100%;height: 100%;"></div>
							</div>
							<div style="width: 100%;height: 50%;display: flex;">
								<div id="subStageDataDiv" style="width: 50%;height: 100%;"></div>
								<div id="warningTypeDiv" style="width: 50%;height: 100%;"></div>
							</div>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane name="5" label="告警记录">
					<div class="tabPanelDiv">
						<el-table v-loading="loadingGJJL" element-loading-text="数据加载中..." :data="dataTableListGJJL" style="width: 100%;flex: 1;">
							<el-table-column label="序号" align="center" type="index" width="50px"></el-table-column>
							<el-table-column label="ID" align="center" prop="id" width="50px" v-if="false"></el-table-column>
							<el-table-column label="告警记录" align="center" prop="name"></el-table-column>
							<el-table-column label="告警记录" align="center" prop="company"></el-table-column>
							<el-table-column label="告警记录" align="center" prop="principalName"></el-table-column>
							<el-table-column label="告警记录" align="center" prop="principalPhone"></el-table-column>
							<el-table-column label="说明描述" align="center" prop="memo" width="500px"></el-table-column>
						  
						</el-table>
						
						<el-pagination
							@size-change="handleSizeChangeGJJL"
							@current-change="handleCurrentChangeGJJL"
							:current-page="pageNumGJJL"
							:page-sizes="[5, 10, 25, 50]"
							:page-size="pageSizeGJJL"
							:background="true"
							layout="total, sizes, prev, pager, next, jumper"
							:total="totalGJJL"
							style="height: 60px;padding-top: 20px;text-align: right;">
						</el-pagination>
					</div>
				</el-tab-pane>
				
			</el-tabs>
		</div>
	</el-dialog>
</template>

<script>
//添加高德地图密钥
window._AMapSecurityConfig = {
	securityJsCode: "2756b5e31610e463de19415cb1b13084"
}
import AMapLoader from '@amap/amap-jsapi-loader';
import moment from "moment";
import * as echarts from 'echarts';
import subiconEnter from "@/assets/icons/hezuo/enter1-32.png";
export default {
	
    props: {
		tabsDialogParams: {
			type: Object,
			default: null
		}
	},
    data() {
        return {
			//企业详情弹窗
			dialogTitle: "企业详情",
			dialogVisible: false,
			currTab: "1",
			//地图相关
			subMap: null,
			submarkers: [],
			subMainCenter: [117.390225,39.396636],
			subCurrMarker: null,
			subCurrPolygon: null,
			hasMore5video: false,
			hasless5video: true,
			videoImage: require('@/assets/image/video1-128.png'),
			//车辆台账
			loadingCLTZ: false,
			totalCLTZ: 0,
			pageNumCLTZ: 1,
			pageSizeCLTZ: 10,
			dataTableListCLTZ: [],
			//进场记录
			loadingJCJL: false,
			totalJCJL: 0,
			pageNumJCJL: 1,
			pageSizeJCJL: 10,
			dataTableListJCJL: [],
			//告警记录
			loadingGJJL: false,
			totalGJJL: 0,
			pageNumGJJL: 1,
			pageSizeGJJL: 10,
			dataTableListGJJL: [],
			//统计分析
			subCentusTime: '',
			dateRangeBarChart: null,
			subStageDataChart: null,
			warningTypeChart: null,
			totalReport: 9999.99,
			totalReportPer: 99.99,
			currReport: 9999,
			currReportPer: 99.99,
			requirePer: 90.00,
			realPer: 98.88,
			isOK: true,
			alertImage: require('@/assets/image/alert1-32.png'),
        }
    },
	mounted() {
		window.dialog = this;
		//this.onOpened();
	},
    methods:{
		changeTab(e) {
			if (e.name == "1")
			{
				
			}
			else if (e.name == "2")
			{
				
			}
			else if (e.name == "3")
			{
				
			}
			else if (e.name == "4")
			{
				//初始化起止时间
				const end = new Date();
				const start = new Date();
				start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
				this.subCentusTime = [start, end];
				setTimeout(() => {
					this.setSubCentusData();
				}, 100)
				
			}
			else if (e.name == "5")
			{
				
			}
		},
		
		//根据屏幕大小自动计算Echart图标内字体大小
		autoFontSize(res){
		   let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
		   if (!clientWidth) return;
		   let fontSize = 100 * (clientWidth / 1920);
		   return res * fontSize;
		},
		
        onOpened() {
			window.dialog = this;
			//alert(this.tabsDialogParams.openType);
			if (this.tabsDialogParams.openType == "map")
			{
				this.subCurrMarker = this.tabsDialogParams.objItem;
				this.currTab = "1";
				if (this.subCurrMarker.enterList.length > 5)
				{
					this.hasMore5video = true;
					this.hasless5video = false;
				}
				else
				{
					this.hasMore5video = false;
					this.hasless5video = true;
				}
				this.dialogTitle = '企业详情 -- ' + this.subCurrMarker.comName;
				this.subMainCenter = this.subCurrMarker.centerPoint;
				this.initMap();
			}
			else if (this.tabsDialogParams.openType == "warningCom")
			{
				this.subCurrMarker = this.tabsDialogParams.objItem;
				this.currTab = "5";
				this.dialogTitle = '企业详情 -- ' + this.tabsDialogParams.objRecord.comName;
			}
		},
		initMap() {
			AMapLoader.load({
				key:'327759cbeffa99a7b771d37f4ee42307',  //设置您的key
				version:"1.4.15",
				plugins:[],
				AMapUI:{
					version:"1.1",
					plugins:[]
				},
				Loca:{
					version:"1.3.2"
				},
				//callback: window.mapVue.loadMapCallback(),
			}).then((AMap)=>{
				//地图图层
				var subMap = new AMap.Map("detailMap",{
					viewMode:"2D",
					//zoom:this.autoFontSize(0.04),
					zoom:15,
					zooms:[2,22],
					center:this.subMainCenter,  //天津
					//center: [104.925825,36.695811],   //中国
					resizeEnable: true,
					//pitch: 45,
					//mapStyle: 'amap://styles/blue',
					//mapStyle: 'amap://styles/darkblue',
					//mapStyle: 'amap://styles/grey',
					//features: ["bg","road","building"]
				});
				//添加控制器
				//var districtSearch = null;
				//var disProvince = null;
				//此方式为异步加载插件，需要在插件加载完后进行插件的使用
				AMap.plugin([
					'AMap.MapType',
					'AMap.ControlBar',
					'AMap.TileLayer.Traffic',
					'AMap.TileLayer.Satellite',
					'AMap.TileLayer.RoadNet',
					'AMap.ToolBar',
					'AMap.Scale',
					'AMap.OverView',
					'AMap.Geolocation',
					'AMap.DistrictSearch',
					'AMap.DistrictLayer',
				], function(){
					// 添加 3D 罗盘控制
					/*
					var ControlBar = new AMap.ControlBar({
						position: {
							top: '10px',
							left: '100px'
						}
					});
					*/
					//map.addControl(ControlBar);
					/*
					var layers = [
						new AMap.TileLayer.Satellite()
					];
					map.setLayers(layers);
					*/
					/*
					// 添加图层选择
					var MapType = new AMap.MapType({
						
					});
					subMap.addControl(MapType);
					//MapType.hide();
					*/
					subMap.on('complete',function(){
						window.dialog.subMap = subMap;
						//alert(window.dialog.dialogTitle);
						setTimeout(()=>{
							window.dialog.openEFsub();
						},100)
						
					});
					/*
					map.on('click',function(){
						
					});
					*/
				});
			}).catch(e=>{
				alert(e);
			})
		},
		//地图显示单个站点围栏信息
		openEFsub() {
			this.submarkers = [];
			//alert(this.subCurrMarker.comName);
			this.subMap.setZoomAndCenter(18,this.subCurrMarker.centerPoint);
			this.subCurrPolygon = null;
			//var data = this.subCurrMarker;
			this.subCurrPolygon = new AMap.Polygon({
				map: window.dialog.subMap,
				path: window.dialog.subCurrMarker.ElectronicFence,
				strokeColor: "#00ffff",
				strokeWeight: 2,
				strokeOpacity: 0.8,
				fillColor: '#27a8bc',
				fillOpacity: 0.6,
				zIndex: 50,
				bubble: true,
				/*
				extData: {
					id: data.id,
					name: data.name,
					company: data.company,
					principalName: data.principalName,
					principalPhone: data.principalPhone,
					memo: data.memo,
				},
				*/
			});
			/*
			polygon.on('click',function(event){
				window.mapVue.subCurrPolygon = polygon;
				window.mapVue.openInfoWindow(event);
			});
			*/
			var subCurrEnterList = this.subCurrMarker.enterList;
			for (var i=0;i<subCurrEnterList.length;i++)
			{
				//var subLngLat = new AMap.LngLat(subCurrEnterList[i].longitude,subCurrEnterList[i].latitude);
				var marker = new AMap.Marker({
					icon: subiconEnter,
					position: subCurrEnterList[i].enterPoint, //此处更换为进出点
					//extData: subCurrEnterList[i],
					label: {
						content: subCurrEnterList[i].enterName,
						direction: 'bottom',
					}
					
				});
				this.submarkers.push(marker);
				this.subMap.add(this.submarkers);
			}
		},
        dialogClose(done) {
        	this.dialogVisible = false;
        	done();
        },
        //车辆台账
        getListCLTZ() {
        	this.dataTableListCLTZ = [
        		{
        			
        		}
        	]
        },
        handleQuery() {
        	this.pageNumCLTZ = 1;
        	this.getListCLTZ();
        },
        handleSizeChangeCLTZ(val) {
        	this.pageNumCLTZ = 1;
        	this.pageSizeCLTZ = val;
        	this.getListCLTZ();
        },
        handleCurrentChangeCLTZ(val) {
        	this.pageNumCLTZ = val;
        	this.getListCLTZ();
        },
		//进场记录
		getListJCJL() {
			this.dataTableListJCJL = [
				{
					
				}
			]
		},
		handleQuery() {
			this.pageNumJCJL = 1;
			this.getListJCJL();
		},
		handleSizeChangeJCJL(val) {
			this.pageNumJCJL = 1;
			this.pageSizeJCJL = val;
			this.getListJCJL();
		},
		handleCurrentChangeJCJL(val) {
			this.pageNumJCJL = val;
			this.getListJCJL();
		},
		//告警记录
		getListGJJL() {
			this.dataTableListGJJL = [
				{
					
				}
			]
		},
		handleQuery() {
			this.pageNumGJJL = 1;
			this.getListGJJL();
		},
		handleSizeChangeGJJL(val) {
			this.pageNumGJJL = 1;
			this.pageSizeGJJL = val;
			this.getListGJJL();
		},
		handleCurrentChangeGJJL(val) {
			this.pageNumGJJL = val;
			this.getListGJJL();
		},
		//统计分析
		//加载统计分析数据
		setSubCentusData() {
			if (this.realPer < this.requirePer)
			{
				this.isOK = false;
			}
			this.setDateRangeBar();
			this.setSubStageData();
			this.setWarningTypeData();
		},
		setDateRangeBar() {
			/*
			getCensusCustomer().then(res => {
			    var dataList = res.data;
				var nameArray = [];
				var dataArray = [];
				for (var i=0; i<dataList.length; i++)
				{
					nameArray.push(dataList[i].name);
					dataArray.push(dataList[i].value1);
				}
				this.drawAreaInlineChart(nameArray,dataArray);
			}).catch(error => {
			
			});
			*/
			var nameArray = ["12-01","12-02","12-03","12-04","12-05","12-06","12-07","12-08","12-09","12-10","12-11","12-12","12-13","12-14","12-15","12-16","12-17","12-18","12-19","12-20","12-21","12-22","12-23","12-24","12-25","12-26","12-27","12-28","12-29","12-30","12-31","01-01","01-02","01-03","01-04","01-05","01-06","12-01","12-02","12-03","12-04","12-05","12-06","12-07","12-08","12-09","12-10","12-11","12-12","12-13","12-14","12-15","12-16","12-17","12-18","12-19","12-20","12-21","12-22","12-23","12-24","12-25","12-26","12-27","12-28","12-29","12-30","12-31","01-01","01-02","01-03","01-04","01-05","01-06"];
			var dataArray = [120,168,145,108,178,158,130,96,90,68,120,168,145,108,178,158,130,96,90,68,120,168,145,108,178,158,130,96,90,68,108,178,158,130,96,90,68,120,168,145,108,178,158,130,96,90,68,120,168,145,108,178,158,130,96,90,68,120,168,145,108,178,158,130,96,90,68,108,178,158,130,96,90,680];
			var lineDataArray = [100,100,98.62,100,96,100,88,96.88,90,100,100,100,98.62,100,96,100,88,96.88,90,100,100,100,98.62,100,96,100,88,96.88,90,100,100,98.62,100,96,100,88,96.88,100,100,98.62,100,96,100,88,96.88,90,100,100,100,98.62,100,96,100,88,96.88,90,100,100,100,98.62,100,96,100,88,96.88,90,100,100,98.62,100,96,100,88,96.88];
			this.drawDateRangeBarChart(nameArray,dataArray,lineDataArray);
		},
		drawDateRangeBarChart(nameArray,dataArray,lineDataArray) {
			if (this.dateRangeBarChart != null && this.dateRangeBarChart != "" && this.dateRangeBarChart != undefined){
			    this.dateRangeBarChart.dispose();
			};
			this.dateRangeBarChart = echarts.init(document.getElementById('dateRangeBarDiv'));
			this.dateRangeBarChart.setOption({
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						//type: 'shadow'
					},
					backgroundColor: 'rgba(30, 54, 124,0.8)',
					borderWidth: '2',
					borderRadius: '5',
					borderColor: 'rgba(30, 159, 255,0.5)',
					textStyle: {
						color: '#ffffff'
					},
					formatter:function (params){
						//return params[0].name + "：" + params[0].value + "";
						return params[0].name + '</br >上报数：' + params[0].value + '</br >上报率：' + params[1].value + '%';
					}
					
				},
				grid: {
					top: '20%',
					left: '5%',
					right: '5%',
					bottom: '35%',
					zlevel: 1
				},
				dataZoom: [
					{
					  show: true,
					  startValue: 0,
					  endValue: 30,
					  height: 20,
					  bottom: '18%',
					},
					/*
					{
					  type: 'inside',
					  start: 0,
					  end: 30
					},
					{
					  show: false,
					  yAxisIndex: 0,
					  filterMode: 'empty',
					  width: 30,
					  height: '60%',
					  showDataShadow: false,
					  left: '1%'
					}
					*/
				],
				xAxis: [
					{
						type: 'category',
						data: nameArray,
						axisLine : {
							lineStyle : {
								color : '#00aaff'
							}
						},
						axisLabel: {
							show: true,
							interval: 0,
							rotate: 30,
							color: '#00ffff',
							fontSize: this.autoFontSize(0.12),
						},
						splitLine: {
							lineStyle : {
								color : '#436ed0'
							}
						}
					},
				],
				yAxis: 
				[
					{
						type: 'value',
						name: '上报数',
						position: 'left',
						alignTicks: true,
						nameTextStyle: {
							fontSize: this.autoFontSize(0.12),
						},
						//minInterval: 1,
						axisLine : {
							show: true,
							lineStyle : {
								color : '#00aaff'
							}
						},
						axisLabel: {
							show: true,
							color: '#00aaff',
							fontSize: this.autoFontSize(0.12),
							formatter: function (value, index) {
							    return value;
							}
						},
						splitLine: {
							show: false,
							lineStyle : {
								color : '#436ed0',
								opacity: 0.1
							}
						}
					},
					{
						type: 'value',
						name: '上报率',
						position: 'right',
						alignTicks: true,
						nameTextStyle: {
							fontSize: this.autoFontSize(0.12),
						},
						//minInterval: 1,
						axisLine : {
							show: true,
							lineStyle : {
								color : '#ffaa00'
							}
						},
						axisLabel: {
							show: true,
							color: '#ffaa00',
							fontSize: this.autoFontSize(0.12),
							formatter: function (value, index) {
							    return value + " %";
							}
						},
						splitLine: {
							show: false,
							lineStyle : {
								color : '#436ed0',
								opacity: 0.1
							}
						},
					}
				],
				series: 
				[
					{
						//data: [120, 20, 150, 80, 70, 110, 130],
						name: '上报数',
						data: dataArray,
						type: 'bar',
						barWidth: this.autoFontSize(0.15),
						itemStyle: {
							color: new echarts.graphic.LinearGradient(
								0, 0, 0, 1,
								[
									{offset: 0, color: 'rgba(0, 170, 255, 1.0)'},                   //柱图渐变色
									{offset: 0.5, color: 'rgba(0, 170, 255, 0.8)'},                   //柱图渐变色
									{offset: 1, color: 'rgba(0, 170, 255, 0.5)'},                   //柱图渐变色
								]
							),
							borderRadius:[0,0,0,0]
						},
					},
					{
						name: '上报率',
						data: lineDataArray,
						type: 'line',
						yAxisIndex: 1,
						itemStyle: {
							color: "#ffaa00"
						}
					}
				]
				
			});
		},
		setSubStageData() {
			/*
			getAreaData().then(res => {
			    var dataList = res.data;
				var nameArray = [];
				var dataArray = [];
				for (var i=0; i<dataList.length; i++)
				{
					nameArray.push(dataList[i].name);
					dataArray.push(dataList[i].value1);
				}
				this.drawAreaDataChart(nameArray,dataArray);
			}).catch(error => {
			
			});
			*/
			var totalCount = 550;
			var dataSource = [{"id":"0","name":"新能源","value":128},{"id":"1","name":"国六","value":96},{"id":"2","name":"国五","value":168},{"id":"3","name":"国四","value":158},{"id":"4","name":"国三","value":128},{"id":"6","name":"其他","value":168}];
			this.drawSubStageDataChart(totalCount,dataSource);
		},
		drawSubStageDataChart(totalCount,dataSource) {
			if (this.subStageDataChart != null && this.subStageDataChart != "" && this.subStageDataChart != undefined){
			    this.subStageDataChart.dispose();
			};
			this.subStageDataChart = echarts.init(document.getElementById('subStageDataDiv'));
			this.subStageDataChart.setOption({
				legend: {
					show: false,
					top: '10%',
					left: '10%',
					orient: 'vertical',
					itemGap: 15,
					textStyle: {
						color: '#ffffff'
					},
					formatter(name) {
						var curVlaue = 0;
						for (var i=0; i < dataSource.length; i++) {
							if (dataSource[i].name == name)
							{
								curVlaue = dataSource[i].value;
							}
						}
						return name + " " + curVlaue + "家";
					}
				},
				grid: {
					top: '10%',
					left: '10%',
					right: '5%',
					bottom: '5%',
					zlevel: 1
				},
				title: {
					text: "车辆构成分布",
					left: 'center',
					textStyle: {
						color: '#ffaa00',
						fontWeight: 'normal',
						fontSize: this.autoFontSize(0.15)
					},
					//backgroundColor: '#4367ba'
					//backgroundColor: '-webkit-linear-gradient(left,#071f56,#4367ba,#071f56)',
				},
				series: [
					{
						name: '排放阶段',
						type: 'pie',
						roseType: false,
						//left: '30%',
						radius: ['30%','75%'],
						itemStyle: {
							borderRadius: 5,
							//borderColor: '#436ed0',
							borderWidth: 0
						},
						label: {
							show: true,
							position: 'outside',
							fontSize: this.autoFontSize(0.12),
							color: '#ffaa00',
							formatter:function(params)
							{
								var percent = 0;
								if ((totalCount > 0)&&(params.data.value > 0))
								{
									percent = Math.round(params.data.value/totalCount * 100);
								}
								return params.data.name + ": " + params.data.value + " 辆，占比 " + percent + '%';
							}
						},
						labelLine: {
							show: true,
							showAbove:false,
							length: 15,
							length2: 15
						},
						emphasis: {
							label: {
								show: true,
								fontSize: this.autoFontSize(0.15),
								color: '#00ffff'
							}
						},
						data: dataSource
					}
				]
			});
		},
		setWarningTypeData() {
			/*
			getAreaData().then(res => {
			    var dataList = res.data;
				var nameArray = [];
				var dataArray = [];
				for (var i=0; i<dataList.length; i++)
				{
					nameArray.push(dataList[i].name);
					dataArray.push(dataList[i].value1);
				}
				this.drawAreaDataChart(nameArray,dataArray);
			}).catch(error => {
			
			});
			*/
			var totalCount = 550;
			var dataSource = [{"id":"0","name":"违规使用车辆","value":128},{"id":"1","name":"数据不规范","value":96},{"id":"2","name":"数据异常","value":168},{"id":"3","name":"其他","value":158}];
			this.drawWarningTypeChart(totalCount,dataSource);
		},
		drawWarningTypeChart(totalCount,dataSource) {
			if (this.warningTypeChart != null && this.warningTypeChart != "" && this.warningTypeChart != undefined){
			    this.warningTypeChart.dispose();
			};
			this.warningTypeChart = echarts.init(document.getElementById('warningTypeDiv'));
			this.warningTypeChart.setOption({
				legend: {
					show: false,
					top: '10%',
					left: '10%',
					orient: 'vertical',
					itemGap: 15,
					textStyle: {
						color: '#ffffff'
					},
					formatter(name) {
						var curVlaue = 0;
						for (var i=0; i < dataSource.length; i++) {
							if (dataSource[i].name == name)
							{
								curVlaue = dataSource[i].value;
							}
						}
						return name + " " + curVlaue + "家";
					}
				},
				grid: {
					top: '5%',
					left: '10%',
					right: '5%',
					bottom: '5%',
					zlevel: 1
				},
				title: {
					text: "告警类型分布",
					left: 'center',
					textStyle: {
						color: '#ffaa00',
						fontWeight: 'normal',
						fontSize: this.autoFontSize(0.15)
					},
					//backgroundColor: '#4367ba'
					//backgroundColor: '-webkit-linear-gradient(left,#071f56,#4367ba,#071f56)',
				},
				series: [
					{
						name: '告警类型',
						type: 'pie',
						roseType: false,
						//left: '30%',
						radius: ['30%','75%'],
						itemStyle: {
							borderRadius: 5,
							//borderColor: '#436ed0',
							borderWidth: 0
						},
						label: {
							show: true,
							position: 'outside',
							fontSize: this.autoFontSize(0.12),
							color: '#ffaa00',
							formatter:function(params)
							{
								var percent = 0;
								if ((totalCount > 0)&&(params.data.value > 0))
								{
									percent = Math.round(params.data.value/totalCount * 100);
								}
								return params.data.name + ": " + params.data.value + " 次，占比： " + percent + '%';
							}
						},
						labelLine: {
							show: true,
							showAbove:false,
							length: 15,
							length2: 15
						},
						emphasis: {
							label: {
								show: true,
								fontSize: this.autoFontSize(0.15),
								color: '#00ffff'
							}
						},
						data: dataSource
					}
				]
			});
		},
    },
};
</script>

<style>
	.tabPanelDiv {
		width: 100%;
		height: 70vh;
		display: flex;
		flex-direction: column;
	}
	.detailLine {
		width: 100%;
		height: 2vw;
		/*
		background-color: #090f1a;
		*/
		display: flex;
	}
	.detailBlock {
		width: auto;
		height: 100%;
		padding-left:0vw;
		display: table;
	}
	.detailBlockText {
		width: auto;
		height: 100%;
		display: table-cell;
		vertical-align: middle;
	}
	.detailBlockTextTitle {
		display: inline-block;
		width: 5vw;
		text-align: right;
		color: #00e5e5;
	}
	.detailBlockTextDesc {
		display: inline-block;
		width: 7vw;
		color: #ffaa00;
	}
	
	.width85 {
		width: 85%;
	}
	.width70 {
		width: 70%;
	}
	.width15 {
		width: 15%;
	}
	.width0 {
		width: 0%;
	}
</style>